<template>
  <div class="CouponList">
    <van-nav-bar left-arrow fixed placeholder :border="false" title="优惠券" @click-left="$router.back()"/>
    <van-tabs sticky swipeable animated>
      <van-tab title="未使用" name="awaiting_review">
        <white-space/>
        <wing-blank>
          <coupon-list-item v-for="coupon in coupons" :key="coupon.id" :coupon="coupon"/>
        </wing-blank>
      </van-tab>
      <van-tab title="已使用" name="awaiting_review">
        <white-space/>
        <empty image="search" description="暂无优惠券"/>
      </van-tab>
      <van-tab title="已过期/失效" name="reviewed">
        <white-space/>
        <empty image="search" description="暂无优惠券"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import WhiteSpace from "@/components/WhiteSpace"
import { Icon, NavBar, Tab, Tabs } from "vant"
import CouponListItem from "@/views/coupon/CouponListItem"
import WingBlank from "@/components/WingBlank"
import Empty from "@/components/Empty"
import { marketing } from "@mall/api-services"


export default {
  name: "CouponList",
  components: {
    WingBlank,
    CouponListItem,
    WhiteSpace,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    Empty,
  },
  data() {
    return {
      coupons: [],
    }
  },
  created() {
    marketing.CouponServiceV1.createTakeCouponQuery()
        .list()
        .then(pageCoupons => {
          this.coupons = pageCoupons.elements
        })
  },
}
</script>

<style lang="scss" scoped>
.CouponList {

}
</style>
